<template>
<div class="tags">
  <el-tag
  v-for="(tag, index) in tabs"
  :key="index"
  :closable="tag.name !== 'home'"
  :effect="$route.name === tag.name ? 'dark': 'plain' "
  @click="changeTag(tag)"
  @close="handleClose(tag, index)"
  size="small"
  > {{tag.label}} </el-tag>
</div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
  name: '' ,
   data () { 
      return {}
    },
    computed: {
      ...mapState({
        tabs: state => state.tab.tabList
      })
    },
    methods: {
      ...mapMutations({
        close: 'closeTag'
      }),
      changeTag(tag) {
        this.$router.push({name: tag.name})
      },
      handleClose(tag, index) {
        this.close(tag)
        const length = this.tabs.length
        if(tag.name !== this.$route.name) {
          return;
        }
        if(index === length) {
          this.$router.push({
            name: this.tabs[index - 1].name
          })
        } else {
          this.$router.push({
            name: this.tabs[index].name
          })
        }
      }
    }

}
</script>

<style lang="less" scoped>
.tags {
  padding: 20px;
  .el-tag {
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>
